<template>
	<view class="device-list-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<uv-navbar title="机具列表" :placeholder="true" :titleStyle="{fontSize:'18px'}" autoBack>
					<template #right>
						<text style="color: #5F56EF;" @tap="showFilter">筛选</text>
					</template>
				</uv-navbar>
				<view class="device-search-box">
					<xh-search-bar placeholder="请输入机具编号" v-model="formParams.keywords" @searchResult="searchResult"></xh-search-bar>
					<view class="device-tip-text">符合条件机具数：{{totalCount}}台</view>
				</view>
			</template>
			<view class="device-container">
				<view class="device-list">
					<view class="device-list-item" v-for="item in dataList" :key="item.id">
						<view class="device-list-item-top" @tap="showDeviceDetail(item)">
							<text v-if="item.merName">{{item.merName}}</text>
							<text>{{item.brandName}}</text>
							<xh-icon icon="icon_jiantou" style="margin-left: auto;flex-shrink: 0;" v-if="!props.agentId"></xh-icon>
						</view>
						<view class="device-list-item-cell">
							<text>机具编号</text>
							<view class="device-list-item-cell-right">
								<text>{{item.ksnNo}}</text>
								<image src="/static/my/my_copy.png" mode="aspectFit" @tap="copyText(item)"></image>
							</view>
						</view>
						<view class="device-list-item-cell">
							<text>机具型号</text>
							<text>{{item.produceName}}({{item.deviceTypeCode}})</text>
						</view>
						<view class="device-list-item-cell">
							<text>机具状态</text>
							<view class="device-list-item-cell-right">
								<text class="device-list-item-unbind-status" :style="{color:getBindStatus(item).color}">{{getBindStatus(item).status}}</text>
								<text class="device-list-item-unactive-status" :style="{color:getActiveStatus(item).color}">{{getActiveStatus(item).status}}</text>
							</view>
						</view>
						<view class="device-list-item-cell">
							<text>服务费金额</text>
							<text>{{item.depositAmount}}元</text>
						</view>
						<view class="device-list-item-cell" v-if="item.bindStatus == '1' && !props.agentId">
							<view class="device-list-item-unbind-btn" @tap="applyUnBind(item)">申请解绑</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<xh-device-filter-pop ref="filterPop" @filterResult="filterResult"></xh-device-filter-pop>
		<xh-alert ref="alertRef" @submit="submitApplyUnBind"></xh-alert>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import XhDeviceFilterPop from './widget/xh-device-filter-pop.vue'
	import { getDeviceList,applyUnBindDevice } from '@/common/api/api.js'
	const props = defineProps(['agentId'])
	const pagingRef = ref(null)
	const filterPop = ref(null)
	const alertRef = ref(null)
	const dataList = ref([])
	const totalCount = ref(0)
	const formParams = ref({
		bindStatus: '',
		activeStatus: '',
		channelType: '',
		policyId: '',
		keywords: ''
	})
	// 处理绑定状态
	const getBindStatus = (item) => {
		if (item.bindStatus == '1') {
			return {
				status: '已绑定',
				color: '#28D182'
			}
		} else if (item.bindStatus == '2') {
			return {
				status: '已解绑',
				color: '#E01300'
			}
		} else {
			return {
				status: '未绑定',
				color: '#FFAA00'
			}
		}
	}
	// 处理激活状态
	const getActiveStatus = (item) => {
		if (item.activeStatus == '1') {
			return {
				status: '已激活',
				color: '#2C8DF4'
			}
		} else if (item.activeStatus == '2') {
			return {
				status: '未激活',
				color: '#909399'
			}
		}
		return {
			status: '',
			color: '#909399'
		}
	}
	// 复制机具号
	const copyText = (item) => {
		uni.$utils.copy(item.ksnNo)
	}
	//筛选
	const showFilter = () => {
		const { bindStatus, activeStatus, channelType, policyId } = formParams.value
		filterPop.value.open(bindStatus, activeStatus, channelType, policyId)
	}
	// 筛选结果
	const filterResult = (res) => {
		console.log(res)
		formParams.value.bindStatus = res.bindStatus
		formParams.value.activeStatus = res.activeStatus
		formParams.value.channelType = res.channelType
		formParams.value.policyId = res.policyId
		pagingRef.value.reload()
	}
	//搜索结果回调
	const searchResult = () => {
		pagingRef.value.reload()
	}
	// 机具详情
	const showDeviceDetail = (item) => {
		if (props.agentId) {
			return
		}
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/home/device-manager/device-list/device-detail/device-detail?data=${data}`
		})
	}
	// 申请解绑
	const applyUnBind = (item)=>{
		alertRef.value.open({content:'确认要申请解绑吗?',ksnNo:item.ksnNo})
	}
	// 确认申请解绑
	const submitApplyUnBind = async (res)=>{
		await applyUnBindDevice({ksnNo:res.ksnNo})
		uni.$utils.showToast('提交成功')
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if (props.agentId) {
			params.agentId = props.agentId
		}
		if (formParams.value.bindStatus != '') {
			params.bindStatus = formParams.value.bindStatus
		}
		if (formParams.value.activeStatus != '') {
			params.activeStatus = formParams.value.activeStatus
		}
		if (formParams.value.channelType != '') {
			params.channelCode = formParams.value.channelType
		}
		if (formParams.value.policyId != '') {
			params.policyId = formParams.value.policyId
		}
		params.ksnNo = formParams.value.keywords
		const res = await getDeviceList(params, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		totalCount.value = res.page.totalElements
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.device-list-layout {
		.device-search-box {
			padding: 30rpx 30rpx 0;

			.device-tip-text {
				padding: 20rpx 0;
				color: $xh-color-6;
				font-size: 26rpx;
			}
		}

		.device-container {
			padding: 0 30rpx;

			.device-list-item {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.device-list-item-top {
					display: flex;
					align-items: center;
					padding-bottom: 30rpx;
					border-bottom: 1px solid #eee;

					text:nth-child(1) {
						margin-right: 30rpx;
					}
					text:nth-child(2) {
						flex-shrink: 0;
					}
				}

				.device-list-item-cell {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: $xh-color-6;

					.device-list-item-cell-right {
						display: flex;
						align-items: center;
						color: #909399;
						font-size: 26rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.device-list-item-unactive-status {
							margin-left: 20rpx;
						}
					}

					.device-list-item-unbind-btn {
						width: 160rpx;
						height: 60rpx;
						text-align: center;
						color: #ffffff;
						background-color: $xh-theme-color;
						border-radius: 10rpx;
						line-height: 60rpx;
						font-size: 28rpx;
					}

					&:nth-child(n+1) {
						margin-top: 16rpx;
					}
				}
			}
		}

	}
</style>